<template>
  <div class="add-company-page">
    <a-spin :spinning="loading">
      <a-form ref="formRef" autocomplete="off" name="basic" :model="formState" :label-col="{ style: 'width:110px' }" :wrapper-col="{ style: 'calc(100% - 110px)' }">
        <a-row :gutter="24">
          <a-col :span="24">
            <span class="value-title">基础信息：</span>
          </a-col>
          <a-col :span="12">
            <a-form-item label="问题件类型" name="type" :rules="[{ required: true, message: '请输入问题件类型', trigger: 'change' }]">
              <a-input v-model:value="formState.type" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="问题说明" name="remark" :rules="[{ required: false, message: '请选择出仓代理!' }]">
              <a-input v-model:value="formState.remark" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <span class="value-title">配置条件：</span>
          </a-col>
          <a-col :span="14">
            <a-form-item label="发起截止时间">
              <a-row align="middle" type="flex">
                <a-col :span="9">
                  <a-form-item name="dateType" :rules="[{ required: true, message: '请选发起截止时间!' }]">
                    <a-select v-model:value="formState.dateType">
                      <a-select-option :value="1">下单时间</a-select-option>
                      <a-select-option :value="2">拣货时间</a-select-option>
                      <a-select-option :value="3">签收时间</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="15">
                  <a-form-item name="dates" :rules="[{ required: true, message: '请输入天数!' }]">
                    <a-input-number v-model:value="formState.dates" style="width: 50%" addon-after="天" :max="999" :min="0" :precision="0" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form-item>
          </a-col>

          <a-col :span="10">
            <a-form-item label="财务结案" name="finCloseCase" :rules="[{ required: true, message: '请选择财务结案!' }]">
              <a-radio-group v-model:value="formState.finCloseCase" name="radioGroup">
                <a-radio :value="0">关闭</a-radio>
                <a-radio :value="1">开启</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>

          <a-col :span="14">
            <a-form-item label="生成应收" name="isCreateReceivable" :rules="[{ required: true, message: '请选择生成应收!' }]">
              <a-radio-group v-model:value="formState.isCreateReceivable" name="radioGroup">
                <a-radio :value="0">否</a-radio>
                <a-radio :value="1">是</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>

          <a-col :span="10">
            <a-form-item label="业务确认" name="bizConfirmation" :rules="[{ required: true, message: '请选择财务确认!' }]">
              <a-radio-group v-model:value="formState.bizConfirmation" name="radioGroup">
                <a-radio :value="0">关闭</a-radio>
                <a-radio :value="1">开启</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="分摊比例">
              <a-space :size="70">
                <a-form-item label="公司" name="companyProportion" :rules="[{ required: true, message: '请输入分摊比例!' }]">
                  <a-input-number v-model:value="formState.companyProportion" :max="9" :min="1" :precision="0" @change="changeCompany"></a-input-number>
                </a-form-item>

                <a-form-item label="个人" name="bizProportion" :rules="[{ required: true, message: '请输入分摊比例!' }]">
                  <a-input-number v-model:value="formState.bizProportion" :max="9" :min="1" :precision="0" @change="changePerson"></a-input-number>
                </a-form-item>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="24">
            <span class="value-title">审批流程：</span>
          </a-col>
          <template v-for="(item, index) in formState.approvalList" :key="index">
            <a-col :span="10">
              <a-form-item label="部门" :name="['approvalList', index, 'deptId']" :rules="[{ required: true, message: '请选择部门!' }]">
                <a-select v-model:value="item.deptId" placeholder="请选择" @change="(e:string)=>changeDep(e,item)">
                  <a-select-option v-for="e in getDeptOpts" :key="e.id" :value="e.id" :label="e.name">{{ e.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="10">
              <a-form-item label="人员" :name="['approvalList', index, 'userIdList']" :rules="[{ required: true, message: '请选择人员!' }]">
                <a-select
                  :options="(item as any).UserOpts"
                  v-model:value="item.userIdList"
                  :fieldNames="{ label: 'userName', value: 'userId' }"
                  mode="multiple"
                  allowClear
                  :maxTagCount="2"
                  @change="changeUser(item)"
                />
              </a-form-item>
            </a-col>

            <a-col :span="4">
              <a-button @click="addHandle" style="margin: 0px 8px" type="primary" v-if="![0].includes(index)"><plus-outlined /></a-button>
              <a-button @click="deleteHandle(index)" v-if="(formState.approvalList as []).length > 2&&![0, 1].includes(index)" type="primary" danger><minus-outlined /></a-button>
            </a-col>
          </template>
        </a-row>
      </a-form>

      <div class="submit-btn-form-item">
        <a-button :loading="loading" type="primary" @click="onSubmit" v-debounce>保 存</a-button>
        <a-button @click="resetForm">取 消</a-button>
      </div>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { PlusOutlined, MinusOutlined } from "@ant-design/icons-vue";
import { editApi } from "@/api/approval/approvalManagement";

const props = withDefaults(
  defineProps<{
    visible: boolean;
    type: number; //1新增  2编辑
    passData: ApprovalManagement.ListRows;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "submit"): void;
  (e: "update:visible", visible: boolean): void;
}>();

const { visible, passData, type } = toRefs(props);
const { tableData, formState, loading, formRef, getDeptAndUserHandle, getDeptOpts } = InitHook();
const { onSubmit, resetForm, addHandle, deleteHandle, changeCompany, changePerson, changeDep, changeUser } = OperationHook({
  visible,
  passData,
  tableData,
  formState,
  loading,
  formRef,
  emit,
  getDeptOpts,
  type
});

const init = async () => {
  loading.value = true;
  if (type.value === 2) {
    return editApi({ id: passData.value.id })
      .then((res: any) => {
        const { code, data } = res;
        if (code === 200) {
          Object.assign(formState, data);

          formState.approvalList.map((a: any) => {
            const findArr = getDeptOpts.value.find(({ deptId }: any) => deptId === a.deptId);
            if (findArr) {
              a.UserOpts = findArr.userList;
            }
          });
        }
      })
      .finally(() => {
        loading.value = false;
      });
  }
  loading.value = false;
};

const firstFn = async () => {
  await getDeptAndUserHandle();
  init();
};

watch(
  () => visible.value,
  v => {
    if (!v) {
      resetForm();
      formState.approvalList = [
        {
          approvalType: undefined,
          deptId: undefined,
          userIdList: []
        },
        {
          approvalType: undefined,
          deptId: undefined,
          userIdList: []
        }
      ];
    } else {
      init();
    }
  }
);
firstFn();
</script>
<style lang="stylus" scoped>
.add-company-page {
  background-color: #fff;

  .operation-btn-wrapper {
    :deep(.ant-btn) {
      margin-right: 16px;
    }
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }

  .value-title{
    font-size 15px
    font-weight:600
  }
}
</style>
